<style src="./index.scss" lang="scss" scoped></style>
<template>
    <div class="ask-breadcrumb-box">
        <ul class="ask-breadcrumb__list">
            <template v-if="showMenu && $route.name !== 'home'">
                <ask-breadcrumb-item to="/" :onlyIcon="true" class="icon-home_item">
                    <icon-svg name="icon-breadcrumb-home" class="icon-home"></icon-svg>
                </ask-breadcrumb-item>
            </template>
            <slot></slot>
        </ul>
        <ul class="ask-breadcrumb__other">
            <div class="ask-breadcrumb__other-flex">
                <el-link icon="el-icon-position" @click="handleAreaClick" v-if="authHistoryList.length > 1">返回上级</el-link>
                <div class="ask-breadcrumb__other-flex-text">
                    当前区域: {{currentArea}}
                </div>
                <!-- <ask-city-no-relation
                    ref="cityNoRelationRef"
                    showOperate
                    cityQuery="auth"
                    :afterInitAuthData="initAuthData"
                    v-model="optionValue"
                    @area-change="handleChange"></ask-city-no-relation> -->
            </div>
        </ul>
    </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import AskBreadcrumbItem from "./item.vue";
import { State } from 'vuex-class';
import FormMixin from "@/mixins/form.mixin.base.ts";

@Component({
    components: {
        AskBreadcrumbItem
    }
})
export default class AskBreadcrumb extends Mixins(FormMixin) {
    @State(state => state.user.userInfo) user: any;
    @Prop({
        type: Boolean,
        default: true
    })
    readonly showMenu!: boolean;

    get currentArea() {
        const _current: any = this.currentAreaList;
        return (_current && _current.label) || "未知";
    }

    get currentAreaList() {
        const _current: any = this.authHistoryList[this.authHistoryList.length - 1];
        return _current || {};
    }

    get authHistoryList() {
        const authHistory: any = this.$store.getters.getAuthHistory;
        return (authHistory && authHistory.list) || [];
    }

    handleAreaClick() {
        this.$store.dispatch("updateAuthArea", {
            back: true
        });
    }

    // optionValue: any[] = [];
    optionValue: any[] = [];

    // ["650000", "653100", "653125", "653125113000"],
    // ["650000", "653100", "653125", "653125113000"],
    // ["510000", "511100"]
    initAuthData() {
        const cityNoRelationRef: any = this.$refs.cityNoRelationRef;
        if (this.currentAreaList.label) {
            cityNoRelationRef.setIds([this.currentAreaList.id]);
        }
    }

    async handleChange(values: any[], nodes: any[]) {
        if (nodes.length === 0) {
            this.$emit("area-change", this.optionValue, nodes);
            return;
        }
        this.$store.dispatch("updateAuthArea", {
            id: nodes[0].data.id
        });
        this.$emit("area-change", this.optionValue, nodes);
        // window.location.href = "/";
        // this.$store.dispatch("dynamicMenuRouter")
        //     .then(r => {
        //         console.log(r);
        //         this.$emit("area-change", this.optionValue, nodes);
        //         window.location.reload();
        //     })
        //     .catch(() => {
        //         this.$store.dispatch("logout").then(() => {
        //             this.$router.replace({
        //                 path: "/auth/login",
        //                 query: {
        //                     redirect: this.$route.fullPath
        //                 }
        //             });
        //         });
        //     });
    }
}
</script>
